<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DockerFly</title>
</head>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="stylesheet" href="css/uikit/uikit.css"/>
<script src="js/common/jquery.min.js"></script>
<script src="js/common/vue.min.js"></script>
<script src="js/common/uikit.js"></script>

<link rel="stylesheet" href="css/main.css"/>
<script lang="javascript" src="js/utils.js"></script>
<script lang="javascript">
    function init() {
        $(".uk-nav-side").children("li").each(
            function (index, eli) {
                $(eli).click(
                    function (event) {
                        mainMenuActive(event)
                    }
                )
            }
        )
    }
</script>
<body onload="init()">
<div id="ContainerApp" class="uk-grid">
    <div class="uk-width-1-6 sidebar">
        <div class="uk-panel uk-panel-box" style="height: 90%; ">
            <h3 class="uk-panel-title"><img src="img/logo.png"/></h3>

            <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav>
                <h3 class="uk-nav-divider"></h3>
                <li><a href="summary.html" target="moduleFrame"><span class="icon uk-icon-dashboard"></span>Summery</a></li>
                <h3 class="uk-nav-divider"></h3>
                <li><a href="swarm.html" target="moduleFrame"><span class="icon uk-icon-connectdevelop"></span>Swarm</a></li>
                <li><a href="node.html" target="moduleFrame"><span class="icon uk-icon-cube"></span>Node</a></li>
                <li><a href="task.html" target="moduleFrame"><span class="icon uk-icon-tasks"></span>Task</a></li>
                <li><a href="service.html" target="moduleFrame"><span class="icon uk-icon-gears"></span>Service</a></li>
                <h3 class="uk-nav-divider"></h3>
                <li><a href="container.html" target="moduleFrame">
                    <span class="icon uk-icon-desktop"></span>Contianer
                </a></li>
                <li><a href="network.html" target="moduleFrame"><span class="icon uk-icon-globe"></span>Network</a></li>
                <li><a href="volume.html" target="moduleFrame"><span class="icon uk-icon-building"></span>Volume</a>
                </li>
                <h3 class="uk-nav-divider"></h3>
                <li><a href="image.html" target="moduleFrame"><span class="icon uk-icon-archive"></span>Image</a></li>
                <h3 class="uk-nav-divider"></h3>
                <li><a href="setting.html" target="moduleFrame"><span class="icon uk-icon-cog"></span>Setting</a></li>
            </ul>
        </div>
    </div>
    <div class="uk-width-5-6" style="padding:0px;height: 100%">
        <div style="height: 100%;">
            <iframe name="moduleFrame" class="uk-width-6-6" style="height: 100%;float:right" src="summary.html"></iframe>
        </div>
    </div>
</div>

</body>
</html>